import {
  CSSProperties,
  KeepAlive,
  Suspense,
  computed,
  defineComponent,
  ref,
} from 'vue';
import { useElementSize } from '@vueuse/core';
import { Layout, Spin } from 'ant-design-vue';
import { RouterView } from 'vue-router';
// import Notice from '@/components/Notice/index.vue';
import { TabViews } from './TabView';

export default defineComponent({
  setup() {
    const tabViewRef = ref();
    const { height: tabViewHeight } = useElementSize(tabViewRef);
    const style = computed<CSSProperties>(() => {
      return {
        height: `calc(100% - ${tabViewHeight.value}px)`,
      };
    });

    return () => (
      <Layout.Content class='relative'>
        <div ref={tabViewRef}>
          <TabViews />
        </div>
        {/* 通知弹窗 */}
        {/* <Notice /> */}
        <div style={style.value} class='main-content'>
          <RouterView>
            {{
              default: ({ Component, route }: any) => {
                return (
                  <KeepAlive include={['dict']}>
                    {
                      <Suspense>
                        {{
                          default: () => <Component key={route.fullPath} />,
                          fullback: () => <Spin></Spin>,
                        }}
                      </Suspense>
                    }
                  </KeepAlive>
                );
              },
            }}
          </RouterView>
        </div>
      </Layout.Content>
    );
  },
});
